<template>
  <div style="height: 100%">
    <!-- class="ql-editor" -->
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
    <form action method="post" enctype="multipart/form-data" id="uploadFormMulti">
      <input
        style="display: none"
        :id="uniqueId"
        type="file"
        name="file"
        multiple
        accept="image/jpg, image/jpeg, image/png, image/gif"
        @change="uploadImg('uploadFormMulti')"
      />
    </form>
    <!-- <div style="width: 100%; height: 100%;"> -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <joint-selection :JointSelection="JointSelection" @guanbi="pingguanbi($event)"></joint-selection>
    <el-input v-model="inputBox" disabled style="margin-right:5px"></el-input>
    <el-button type="primary" @click="ljisi">主要按钮</el-button>
    <!-- <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="kkmc" label="日期" sortable width="180"></el-table-column>
      <el-table-column prop="kklx_MC" label="姓名" sortable width="180"></el-table-column>
      <el-table-column prop="xqmc" label="地址"></el-table-column>
      <el-table-column label="操作">
       
    </el-table-column>-->
    <!-- </el-table> -->
    <!-- <video width="100%" height="600" controls>
      <source src="https://v1.cecdn.yun300.cn/100001_1911295043/%E4%B8%AD%E6%96%87%E5%85%AC%E5%8F%B8%E4%BB%8B%E7%BB%8D%E8%A7%86%E9%A2%91.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />您的浏览器不支持 HTML5 video 标签。
    </video>-->
    <!-- <img style="width: 100%; height: 100%;" src="@/assets/images/earthBox/world.jpg" alt=""> -->
    <!-- <iframe
      id="mainIframe"
      width="100%"
      height="100%"
      name="mainIframe"
      src="http://192.168.1.45:5001/login"
      frameborder="0"
      scrolling="auto"
    ></iframe>-->
    <!-- <iframe
      id="mainIframe"
      width="100%"
      height="100%"
      name="mainIframe"
      src="https://www.taobao.com/"
      frameborder="0"
      scrolling="auto"
    ></iframe>-->
  </div>
</template>
<script>
import echarts from 'echarts'
import { ziC, upload } from '@/utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
import jointSelection from '@/components/JointSelection/index.vue'
import { pinyin } from '@/utils/zhuanghuan.js'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module' // 拖动图片
import imageResize from 'quill-image-resize-module' // 缩放图片
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', imageResize) // 添加
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  data: function() {
    return {
      // 指定图表的配置项和数据
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 60, name: '仪表盘' }]
          }
        ]
      },
      tableData: [],
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      total: 0, // 总条数
      JointSelection: {
        dialogWorkOrder: false
      },
      inputBox: '',
      uniqueId: 'uniqueId', // 图片上传
      editorOption: {
        modules: {
          imageDrop: false,
          imageResize: {
            // 添加
            displayStyles: {
              // 添加
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'] // 添加
          },
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      content:
        '<p><img src="https://cmmop.hnlot.com.cn/annex/cmmop/zczx/zcgl/ZiChanTuPian/image/2021/5/13/69705f4473ae4b838ba562c896b26577.jpg" width="200" style="display: inline; margin: 0px 1em 1em 0px; float: left;"></p>'
    }
  },
  components: { jointSelection, quillEditor },
  mounted: function() {
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption(this.option)
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
    var _this = this
    var imgHandler = async function(image) {
      if (image) {
        var fileInput = document.getElementById(_this.uniqueId) // 隐藏的file文本ID
        fileInput.click() // 加一个触发事件
      }
    }
    _this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  created: function() {
    // this.getLocation()
    this.getZiList()
    console.log(pinyin.getFullChars('前卫', false))
  },

  methods: {
    async getZiList() {
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      params.append('JGID', user.zzjg_ID)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.total = 0
        return (this.tableData = [])
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      // const abcd = JSON.stringify(res.data.list)
      // const newCity = abcd.replace(/ziChanList/, 'children')

      // this.tableData = JSON.parse(newCity)
      // this.tableData = res.data.list
      res.data.list.forEach(item => {
        item.children = [
          {
            id: 11,
            kkmc: '2016-05-01',
            kklx_MC: '王小虎',
            xqmc: '上海市普陀区金沙江路 1519 弄'
          },
          {
            id: 12,
            kkmc: '2016-05-01',
            kklx_MC: '王小虎',
            xqmc: '上海市普陀区金沙江路 1519 弄'
          }
        ]
      })
      console.log(res.data.list)
      this.tableData = res.data.list

      this.total = res.data.countList
    },
    pingguanbi(val) {
      const { type, xqbm, xqbmArr, cityVal } = val
      this.inputBox = cityVal
      console.log(type, xqbm, xqbmArr, cityVal)
      this.JointSelection.dialogWorkOrder = type
    },
    ljisi() {
      this.JointSelection.dialogWorkOrder = true
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(val) {
      console.log(val)
    }, // 内容改变事件
    // 上传图片
    async uploadImg() {
      var _this = this
      // 构造formData对象
      var formData = new FormData()
      formData.append('file', document.getElementById(_this.uniqueId).files[0])
      formData.append('type', 0)
      const { data: res } = await this.$http.post(`${upload}`, formData)
      if (res.code === '0000') {
        console.log(res)
        const Range = _this.$refs.myQuillEditor.quill.getSelection()
        // 上传文件成功之后在富文本中回显(显示)
        _this.$refs.myQuillEditor.quill.insertEmbed(Range !== null ? Range.index : 0, 'image', res.data[0])
      } else {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      // try {
      //   // 调用上传文件接口
      //   this.$http.productapi.uploadImgReq(formData).then(res => {
      //     // 返回上传文件的地址
      //     let url = res
      //     if (url != null && url.length > 0) {
      //       const Range = _this.editor.getSelection()
      //       url = url.indexOf('http') !== -1 ? url : 'http:' + url
      //       // 上传文件成功之后在富文本中回显(显示)
      //       _this.editor.insertEmbed(Range !== null ? Range.index : 0, 'image', url)
      //     } else {
      //       _this.$message.warning('图片上传失败')
      //     }
      //     // 成功之后,将文件的文本框的value置空
      //     document.getElementById(_this.uniqueId).value = ''
      //   })
      // } catch ({ message: msg }) {
      //   document.getElementById(_this.uniqueId).value = ''
      //   _this.$message.warning(msg)
      // }
    }
    // getLocation: function() {
    //   if (navigator.geolocation) {
    //     navigator.geolocation.getCurrentPosition(this.showPosition, this.showError, { enableHighAccuracy: true, timeout: 3000, maximumAge: 3000 })
    //   } else {
    //     alert('浏览器不支持地理定位。')
    //   }
    // },
    // showPosition(position) {
    //   console.log(position)
    //   const lat = position.coords.latitude // 纬度
    //   const lag = position.coords.longitude // 经度
    //   console.log('纬度:' + lat + ',经度:' + lag)
    //   this.input = '纬度:' + lat + ',经度:' + lag
    // },
    // showError(error) {
    //   switch (error.code) {
    //     case error.PERMISSION_DENIED:
    //       alert('定位失败,用户拒绝请求地理定位')
    //       break
    //     case error.POSITION_UNAVAILABLE:
    //       alert('定位失败,位置信息是不可用')
    //       break
    //     case error.TIMEOUT:
    //       alert('定位失败,请求获取用户位置超时')
    //       break
    //     case error.UNKNOWN_ERROR:
    //       alert('定位失败,定位系统失效')
    //       break
    //   }
    // }
  }
}
</script>
